<template>
  <el-row class="analysisWrap">
    <el-row type="flex" justify="space-between">
      <el-col style="color: #ffffff;font-size: 16px;padding-bottom: 4px">
        {{ $store.getters.getLocation }}业务质量趋势分析ㅡ{{ year }}年{{ month }}月<span v-if="type===10">{{ day }}日</span>
      </el-col>
      <el-col align="right">
        <el-switch
          style="display: block"
          v-model="type"
          :active-value="20"
          :inactive-value="10"
          active-color="#0050ff"
          inactive-color="#0050ff"
          active-text="月"
          inactive-text="日"
          @change="getTrend()"
        >
        </el-switch>
      </el-col>
    </el-row>
    <LineCharts
      :chartData="chartData"
      :height="'100%'"
    />
  </el-row>
</template>

<script>
  import LineCharts from '@c/LineCharts'
  export default {
    name: "Radar",
    components: {
      LineCharts
    },
    data() {
      return {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate(),
        chartData: {
          dataY: [],
          dataLine: []
        },
        type: 10,
        code: null
      }
    },
    created() {
      this.$bus.$off('provinceChanged')
      this.$bus.$on('provinceChanged', this.getTrend)
    },
    methods: {
      getTrend(code){
        if (code) {
          this.code = code
        }
        window._api.apiTrend({ type: this.type, code: this.code }).then(res => {
          if (res.state === 'ok') {
            this.chartData.dataY = []
            this.chartData.dataLine = []
            res.data.sort((a,b) =>  new Date(a[0]) - new Date(b[0])).map(item => {
              this.chartData.dataLine.push(item[1])
              if (this.type === 10) {
                this.chartData.dataY.push(item[0].split(' ')[1])
              } else if (this.type === 20) {
                this.chartData.dataY.push(item[0].substring(8) + '日')
              }
            })
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
    }
  }
</script>

<style scoped>
.analysisWrap{
  height: 28vh;
  padding: 14px;
  background: rgba(14,22,95,0.4);
  border: 1px solid rgba(14,101,187,0.66);
}
</style>
